class View {
    constructor(ctx, model) {
        this.ctx = ctx
        this.model = model
    }

    create() {
        // console.log('create View');
        this.drawPanel()
        this.drawSnake()
        this.drawFood()
    }

    drawPanel() {

    }

    drawFood() {
        this.model.food.draw(this.ctx)
    }

    drawSnake() {
        this.model.snake.draw(this.ctx)
    }

    clear() {
        this.ctx.clearRect(0, 0, this.model.width, this.model.height)
    }

    drawText(msg) {
        this.ctx.textAlign = 'start'
        this.ctx.textBaseline = 'hanging'
        this.ctx.font = `${ this.model.prompt_font_size }px ${ this.model.fontFamily }`
        let width = this.ctx.measureText(msg).width
        let x = (this.model.width - width) / 2
        let y = (this.model.height - this.model.prompt_font_size) / 2
        let gradient = this.ctx.createLinearGradient(0, 0, width, 0);
        // console.log(gradient);
        gradient.addColorStop(0, 'magenta')
        gradient.addColorStop(0.5, 'blue')
        gradient.addColorStop(1, 'red')
        this.ctx.fillStyle = gradient
        this.ctx.fillText(msg, x, y);
        // this.ctx.fillText()
    }

    repait() {
        this.clear()
        this.drawPanel()
        this.drawFood()
        this.drawSnake()
    }
}

export default View